<template>
	<el-drawer :title="titleMap[mode]" v-model="visible" size="70%" direction="rtl" destroy-on-close
			   @closed="$emit('closed')"
			   :close-on-click-modal="false">
		<template #header="{ titleId, titleClass }">
			<h4 :id="titleId" :class="titleClass">{{ form.name }}</h4>
		</template>

		<div style="margin-left: 20px;margin-right: 20px">
			<el-row :gutter="30">
				<el-col :span="12">
					<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px"
							 label-position="left">
						<el-form-item class="to-them" label="上级菜单" prop="parentId">
							<el-cascader v-model="form.parentId" :options="menuOptions" :props="menuProps"
										 placeholder="顶级菜单" clearable/>
						</el-form-item>
						<el-form-item label="资源名称" prop="name">
							<el-input v-model="form.name" clearable></el-input>
						</el-form-item>
						<el-form-item label="描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述" prop="description">
							<el-input v-model="form.description" clearable type="textarea" rows="4" maxlength="50"
									  placeholder="用于日志记录时操作描述"
									  show-word-limit></el-input>
						</el-form-item>
						<el-form-item label="资源类型" prop="type">
							<el-radio-group v-model="form.type">
								<el-radio-button label="1" value="1">菜单</el-radio-button>
								<el-radio-button label="2" value="2">内链</el-radio-button>
								<el-radio-button label="3" value="3">外链</el-radio-button>
								<el-radio-button label="4" value="4">按钮</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item class="to-them" label="固定tab栏" prop="affix"
									  v-if="form.type == 1 || form.type == 2">
							<el-radio-group v-model="form.affix">
								<el-radio-button label="1" value="1">是</el-radio-button>
								<el-radio-button label="0" value="0">否</el-radio-button>
							</el-radio-group>
							<div class="el-form-item-msg">菜单固定在导航中，且用户无法关闭</div>
						</el-form-item>
						<el-form-item class="to-them" label="视&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;图" prop="component"
									  v-if="form.type == 1">
							<el-input v-model="form.component" clearable placeholder="">
								<template #prepend>views/</template>
							</el-input>
							<div class="el-form-item-msg">组件在views/目录下的位置</div>
						</el-form-item>
						<el-form-item class="to-them" :label="form.type == 4 ? '权限名称' : '组件名称'" prop="perms">
							<el-input v-model="form.perms" clearable></el-input>
						</el-form-item>
						<el-form-item class="to-them" label="访问链接" prop="url">
							<el-input v-model="form.url" clearable></el-input>
						</el-form-item>
						<el-form-item class="to-them" label="菜单图标" prop="icon"
									  v-if="form.type == 1 || form.type == 2 || form.type == 3">
							<sc-icon-select v-model="form.icon" clearable></sc-icon-select>
						</el-form-item>
						<el-form-item class="to-them" label="排&nbsp;序&nbsp;值" prop="orderNum"
									  v-if="form.type == 1 || form.type == 2 || form.type == 3">
							<el-input-number v-model="form.orderNum" :min="0"></el-input-number>
						</el-form-item>
					</el-form>

					<div class="success custom-block" v-if="form.type == 1" style="margin-left: 12px">
						<p class="custom-block-title">参数说明——菜单</p>
						<p class="custom-block-dis"><b>1. 固定tab栏: </b>菜单固定在导航中，且用户无法关闭（一般用于固定首页，如果用户没有权限，则不建议设置该菜单固定tab栏）
						</p>
						<p class="custom-block-dis"><b>2. 视图:</b> 组件在views/目录下的位置</p>
						<p class="custom-block-dis"><b>3. 组件名称:</b> 即视图所指向的文件中name标识的属性值，且必须唯一
						</p>
						<p class="custom-block-dis"><b>4. 访问链接:</b> 点击菜单时url请求地址，通过该地址链接到视图所指向的组件文件，且必须唯一
						</p>
						<p class="custom-block-dis"><b>5. 菜单图标:</b> 菜单展示图标</p>
						<p class="custom-block-dis"><b>6. 排序值:</b> 数值越小，菜单优先显示</p>
						<p class="custom-block-dis"><b>7. 附属接口权限:</b> 用户访问该菜单时，该菜单中如果多个附加接口也需要进行权限控制的地址
						</p>
					</div>

					<div class="success custom-block" v-if="form.type == 2" style="margin-left: 12px">
						<p class="custom-block-title">参数说明——内链</p>
						<p class="custom-block-dis"><b>1. 固定tab栏: </b>菜单固定在导航中，且用户无法关闭（一般用于固定首页，如果用户没有权限，则不建议设置该菜单固定tab栏）
						</p>
						<p class="custom-block-dis"><b>2. 组件名称:</b> 唯一标识，且必须唯一</p>
						<p class="custom-block-dis"><b>3. 访问链接:</b> 点击菜单时，iframe通过该参数链接到指定页面，且必须唯一
						</p>
						<p class="custom-block-dis"><b>4. 菜单图标:</b> 菜单展示图标</p>
						<p class="custom-block-dis"><b>5. 排序值:</b> 数值越小，菜单优先显示</p>
						<p class="custom-block-dis"><b>6. 附属接口权限:</b> 用户访问该菜单时，该菜单中如果多个附加接口也需要进行权限控制的地址
						</p>
					</div>

					<div class="success custom-block" v-if="form.type == 3" style="margin-left: 12px">
						<p class="custom-block-title">参数说明——外链</p>
						<p class="custom-block-dis"><b>1. 组件名称:</b> 唯一标识，且必须唯一</p>
						<p class="custom-block-dis"><b>2. 访问链接:</b> 点击菜单时，在新增窗口中打开该参数指向的页面地址，且必须唯一
						</p>
						<p class="custom-block-dis"><b>3. 菜单图标:</b> 菜单展示图标</p>
						<p class="custom-block-dis"><b>4. 排序值:</b> 数值越小，菜单优先显示</p>
						<p class="custom-block-dis"><b>5. 附属接口权限:</b> 用户访问该菜单时，该菜单中如果多个附加接口也需要进行权限控制的地址
						</p>
					</div>

					<div class="success custom-block" v-if="form.type == 4" style="margin-left: 12px">
						<p class="custom-block-title">参数说明——按钮</p>
						<p class="custom-block-dis"><b>1. 访问链接:</b> 点击按钮时，该按钮需要请求的接口地址</p>
						<p class="custom-block-dis"><b>2. 附属接口权限:</b> 用户点击该按钮时，该菜单中如果多个附加接口也需要进行权限控制的地址
						</p>
					</div>

				</el-col>
				<el-col :span="12">
					<h3 style="margin-bottom: 20px">附属接口权限</h3>
					<sc-form-table v-model="form.permissionSubsidiaryList" :addTemplate="apiListAddTemplate"
								   placeholder="暂无匹配接口权限">
						<el-table-column prop="name" label="权限名称" width="200">
							<template #default="scope">
								<el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="url" label="Api url">
							<template #default="scope">
								<el-input v-model="scope.row.url" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
					</sc-form-table>
				</el-col>
			</el-row>

		</div>

		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-drawer>
</template>

<script>
import scIconSelect from '@/components/scIconSelect'

export default {
	components: {
		scIconSelect
	},
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增角色',
				edit: '编辑角色',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
			// 表单数据
			form: {
				permissionId: "",
				name: "未命名",
				description: "",
				url: "",
				perms: "",
				parentId: "0",
				component: "",
				affix: 0,
				type: 1,
				orderNum: 1,
				icon: "",
				status: 1,
				apiList: [],
				permissionSubsidiaryList: []
			},
			apiListAddTemplate: {
				name: "",
				url: ""
			},
			menuOptions: [],
			menuProps: {
				value: 'permissionId',
				label: 'name',
				children: 'permissionList',
				checkStrictly: true
			},
			// 菜单结构数据
			menu: {
				list: [],
				treeData: [],
				defaultCheckedKeys: [],
				props: {
					value: 'permissionId',
					label: 'name',
					children: 'permissionList',
				}
			},
			// 验证规则
			rules: {
				name: [
					{required: true, message: '请输入角色名称'}
				],
				description: [
					{required: true, message: '请输入备注信息'}
				],
				type: [
					{required: true, message: '请选择资源类型'}
				]
			}
		}
	},
	mounted() {
		this.init();
	},
	methods: {

		/**
		 * 显示当前组件窗口
		 * @param mode
		 * @returns {default.methods}
		 */
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},

		/**
		 * 加载初始化数据
		 * @returns {Promise<void>}
		 */
		async init() {
			if (this.menuOptions == undefined || this.menuOptions.length == 0) {
				let data = await this.$API.system.permission.listAll.get();
				data = data.data
				this.menuOptions = [{
					"permissionId": "0",
					"name": "顶级菜单",
					"permissionList": data
				}];
			}
		},

		/**
		 * 父组件提前设置当前子组件中上级菜单下拉列表数据（解决网络延迟显示慢的问题）
		 * @param data
		 * @returns {Promise<default.methods>}
		 */
		initAdditionalData(data) {
			console.log(data)
			this.menuOptions = data;
			return this;
		},

		/**
		 * 表单提交方法
		 */
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					let requestParams = Object.assign({}, this.form);
					if (requestParams.parentId == undefined || requestParams.parentId.length == 0) {
						requestParams.parentId = "0";
					} else {
						if ((typeof requestParams.parentId) != 'string') {
							requestParams.parentId = requestParams.parentId[requestParams.parentId.length - 1];
						}
					}

					// 数据清理验证
					switch (requestParams.type) {
						case 1:
							// 菜单

							break;
						case 2:
							// 内链

							break;
						case 3:
							// 外链

							break;
						case 4:
							// 按钮

							break;
					}

					var res;
					if (this.mode == 'add') {
						res = await this.$API.system.permission.add.post(requestParams);
					} else {
						res = await this.$API.system.permission.edit.put(requestParams);
					}
					this.isSaveing = false;
					if (res.status == 200) {
						this.$emit('success')
						this.visible = false;
						this.$message.success("操作成功")
					}
				}
			})
		},

		/**
		 * 表单注入数据
		 * @param data
		 */
		setData(data) {
			this.form.permissionId = data.permissionId;
			this.form.name = data.name;
			this.form.description = data.description;
			this.form.url = data.url;
			this.form.perms = data.perms;
			this.form.parentId = data.parentId;
			this.form.component = data.component;
			this.form.affix = data.affix;
			this.form.type = data.type;
			this.form.orderNum = data.orderNum;
			this.form.icon = data.icon;
			this.form.status = data.status;
			for (let sub of data.permissionSubsidiaryList) {
				this.form.permissionSubsidiaryList.push(
					{
						name: sub.name,
						url: sub.url
					}
				);
			}


			//可以和上面一样单个注入，也可以像下面一样直接合并进去
			//Object.assign(this.form, data)
		}
	}
}
</script>

<style>


.custom-block.success {
	padding: 12px 16px;
	background-color: #f1fcef;
	border-radius: 4px;
	border-left: 5px solid #85ea5f;
	margin: 0px 0;
	color: #303133;
}

.custom-block.error {
	padding: 8px 16px;
	background-color: #fcf1f0;
	border-radius: 4px;
	border-left: 5px solid #e47470;
	margin: 0px 0;
	color: #303133;
}

.custom-block .custom-block-title {
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 8px;
}

.custom-block .custom-block-dis {
	margin-top: 6px;
}
</style>
